<template>
  <div class='five channel-item'>
    <el-row class="share-row  ">
      <el-col>
        <el-button size="mini" type="primary" @click="handleAdd " v-hasPermi="['system:channel:add']">新建附加列表模板</el-button>
        <el-button size="mini" type="cyan" @click="getList " v-hasPermi="['system:channel:query']">刷新</el-button>
      </el-col>
    </el-row>
    <el-table :data="listAppend" style="width: 100%" :header-row-style='headerRowFn' :header-cell-style='headerRowFn'>
      <el-table-column prop="name" label="模板名称" width="180" align="center">
      </el-table-column>
      <el-table-column prop="listId" label="模板Id" width="180" align="center">
      </el-table-column>
      <el-table-column prop="createdDate" label="创建时间" width="180" align="center">
      </el-table-column>
      <el-table-column prop="address" label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:channel:edit']">模板编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:channel:remove']">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getChannelListAppendList, removeTemplate } from "@/api/content/clounm";
import { refreshRouteArr } from "@/settings.js";

export default {
  props: {
    netRow: {
      type: Object,
      require: true,
    },
    siteRow: {
      type: Object,
      require: true,
    },
    columnRow: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {
      listAppend: [],
    };
  },

  components: {},

  computed: {},

  mounted() {
    this.getList();
    document.addEventListener("visibilitychange", this.Fnrefresh);
  },

  watch: {},

  methods: {
    Fnrefresh() {
      let route = this.$route.path;
      if (!document.hidden) {
        if (refreshRouteArr.includes(route)) {
          this.getList();
        }
      }
    },
    //获取附加列表模板  列表
    getList() {
      getChannelListAppendList(this.columnRow.channelId).then((res) => {
        this.listAppend = res.data;
      });
    },
    //新增模板
    handleAdd() {
      let { href } = this.$router.resolve({
        path: "/column/appendArticle",
        query: {
          channelId: this.columnRow.channelId,
          siteId: this.siteRow.siteId,
          templateId: this.columnRow.listId || null,
        },
      });
      window.open(href, "_blank");
    },
    //编辑附加模板
    handleUpdate(row) {
      if (!row.listId) {
        alert("row.templateId  不存在");
        return;
      }
      let { href } = this.$router.resolve({
        path: "/column/appendArticle",
        query: {
          channelId: this.columnRow.channelId,
          siteId: this.siteRow.siteId,
          templateId: row.listId,
        },
      });
      window.open(href, "_blank");
    },
    //删除附加模板
    handleDelete(row) {
      if (!row.listId) {
        alert("row.templateId  不存在");
        return;
      }
      this.$confirm(`是否确认删除模板名称为：${row.name} 的数据项？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        removeTemplate({ templateId: row.listId }).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("删除成功");
            this.getList();
          }
        });
      });
    },
    headerRowFn() {
      return { background: "#248277", color: "#fff" };
    },
  },
  destroyed() {
    document.removeEventListener("visibilitychange", this.Fnrefresh);
  },
};
</script>

<style scoped lang='scss'>
.five {
}
</style>
